<template>
  <!-- 病人信息 -->
  <view class="patient_info m16">
    <text class="pateint_title">请详细描述你的病情</text>
    <textarea
      :maxlength="300"
      v-model="submitPatient.illness"
      :auto-focus="true"
      placeholder-class="textarea_place_style"
      placeholder="为了更好获得医生帮助，请尽可能详细描述病情"
    ></textarea>
  </view>

  <!-- 医生指导用药 -->
  <view class="card m16 doctor_guide">
    <checkbox-group @change="changeCheck">
      <label>
        <checkbox value="ch" :checked="submitPatient.guide" />
        需要医生指导用药</label
      >
    </checkbox-group>
  </view>

  <!-- 上传患者照片 -->
  <view class="card m16 doctor_upload">
    <text class="doctor_upload_title">上传检查报告或患者照片</text>
    <view class="upload_box mt14">
      <!-- 上传预览的图片 -->
      <view class="preview_pic_list mr14">
        <view
          class="preview_pic_item"
          v-for="(item, index) in submitPatient.ins_report"
          :key="index"
        >
          <image :src="item" />
          <!-- 删除的按钮 -->
          <image
            @click="deleteUploadImg(index)"
            src="/static/other/shanchu-goods.svg"
          />
        </view>
      </view>
      <!-- 上传按钮 -->
      <view class="upload_btn" @click="upload">
        <image src="/static/other/shuxing-img.png" mode="" />
      </view>
    </view>
  </view>

  <!-- 选择就诊人 -->
  <view class="card m16">
    <text class="bold">选择就诊人</text>

    <view class="patient_select mt14">
      <view class="avata_info">
        <image src="/static/other/touxiang.svg" />
        <text class="patient_name ml14">{{ name }}</text>
      </view>
      <text class="patient_select_style" @click="selectPatient"
        >选择就诊人</text
      >
    </view>
  </view>

  <!-- 占位高度 -->
  <view style="height: 300rpx"></view>
  <view class="footer_submit">
    <text class="btn cancel">取消</text>
    <text class="btn submit" @click="submitPatientFn">提交</text>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { uploadImage } from "@/utils/upload";
import { IMAGEURL } from "@/http/request";
import { patientStore } from "@/store/index";
import { submitPatientApi } from "@/http/api";

const store = patientStore();
const name = ref("");

//$subscribe类似于watch
store.$subscribe((mutations, state) => {
  console.log("监听：：：：", state);
  name.value = state.patient.name;
  submitPatient.patient_id = state.patient.patient_id;
});

//定义要提交的参数

const submitPatient = reactive({
  illness: "",
  guide: false,
  ins_report: [] as string[],
  patient_id: "",
});

//是否选中
const changeCheck = (e: { detail: { value: any } }) => {
  submitPatient.guide = e.detail.value.length > 0 ? true : false;
  console.log(submitPatient.guide);
};

//上传患者照片
const upload = async () => {
  //调用上传方法res
  // uploadImage(上传地址,成功消息，失败的消息);
  const res: any = await uploadImage(IMAGEURL, "上传图片中", "上传失败");
  const urlStr = JSON.parse(res.data).data;
  //将返回的上传路径添加给
  submitPatient.ins_report.push(urlStr);
};

//上传要删除的图片
const deleteUploadImg = (i: number) => {
  submitPatient.ins_report.splice(i, 1);
};

//选择就诊人
const selectPatient = () => {
  uni.navigateTo({
    url: "/pages/my_patient/my_patient",
  });
};

//提交就诊人信息
const submitPatientFn = async () => {
  //调用接口
  const res = await submitPatientApi(submitPatient);

  //再跳转上一个页面
  uni.navigateBack({ delta: 1 });
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";
page {
  background: #e4e4e4;
  box-sizing: border-box;
}

.patient_info {
  background: #fff;
  padding-left: 30rpx;
  .pateint_title {
    display: block;
    font-weight: bold;
    padding: 20rpx 0rpx;
  }
}

.textarea_place_style {
  color: #48dede;
}

.doctor_guide {
  font-size: 14px;
}

.doctor_upload_title {
  font-weight: bold;
}

.preview_pic_item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  image {
    &:nth-of-type(1) {
      width: 100%;
      height: 100%;
    }

    &:nth-of-type(2) {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

.upload_btn image {
  width: 200rpx;
  height: 200rpx;
}

.upload_box {
  display: flex;
}

// 选择就诊人
.patient_select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  image {
    width: 100rpx;
    height: 100rpx;
  }

  .patient_select_style {
    color: #477ed8;
  }
}

.avata_info {
  display: flex;
  align-items: center;
}

.footer_submit {
  padding: 50rpx 0;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-around;

  .btn {
    border-radius: 10rpx;
    padding: 20rpx 80rpx;
    background: #4677e2;
    color: #fff;

    &:nth-of-type(1) {
      background: #ecf2fd;
      color: #4677e2;
    }
  }
}
</style>
